<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>天气数据分析可视化</title>
    <meta content="Responsive admin theme build on top of Bootstrap 4" name="description">

    <link href="/static/static/css/bootstrap-datepicker.min.css" rel="stylesheet">

    <!-- Morris Chart CSS -->
    <link href="/static/static/css/swiper-bundle.min.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/bootstrap-datepicker.min.css" rel="stylesheet">

    <!-- DataTables -->
    <link href="/static/static/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/buttons.bootstrap4.min.css" rel="stylesheet" type="text/css">

    <!-- Responsive datatable examples -->
    <link href="/static/static/css/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css">

    <link href="/static/static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/metismenu.min.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/icons.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/style.css" rel="stylesheet" type="text/css">

    <!-- ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
</head>

<body>

<div class="header-bg">
    <!-- Navigation Bar -->
    <header id="topnav">
        <div class="topbar-main" style="background-color: #1D84DE">
            <div class="container-fluid">
                <!-- Logo -->
                <div>
                    <a href="" class="logo" style="margin-top: 10px;display: flex">
                        <img src="../static/static/weathericon/方块.png"
                             style="width: 40px; height: 40px;margin-top: 5px;margin-right: 5px">

                        <h3 style="color: white">天气数据分析可视化</h3>
                    </a>
                </div>

                <div class="menu-extras topbar-custom navbar p-0">
                    <!-- Search input -->
                    <div class="search-wrap" id="search-wrap">
                        <div class="search-bar">
                            <input class="search-input" type="search" placeholder="Search">
                            <a href="#" class="close-search toggle-search" data-target="#search-wrap">
                                <i class="mdi mdi-close-circle"></i>
                            </a>
                        </div>
                    </div>

                    <ul class="navbar-right ml-auto list-inline float-right mb-0">
                        <!-- Other navigation links -->
                        <li class="dropdown notification-list list-inline-item d-none d-md-inline-block">
                            <a class="nav-link waves-effect" href="#" id="btn-fullscreen">
                                <i class="fas fa-expand noti-icon" style="color: white"></i>
                            </a>
                        </li>
                        <li class="dropdown notification-list list-inline-item d-none d-md-inline-block">
                            <a class="nav-link waves-effect" href="#" id="btn-fullscreen">
                                <h5 style="color: #fff">
                                    {{ userInfo.username }}
                                </h5>
                            </a>
                        </li>
                        <li class="dropdown notification-list list-inline-item">
                            <!-- User profile dropdown -->
                            <div class="dropdown notification-list nav-pro-img">
                                <a class="dropdown-toggle nav-link arrow-none waves-effect nav-user"
                                   data-toggle="dropdown" href="#" role="button" aria-haspopup="false"
                                   aria-expanded="false">
                                    <img src="/static/static/picture/user-1.jpg" alt="user" class="rounded-circle">
                                </a>
                                <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated profile-dropdown">

                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item " href="/userApp/logOut"><i
                                            class="mdi mdi-power"></i> 退出登录</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item " href="/userApp/userinfo"><i
                                            class="ion-ios-add-circle-outline"></i> 个人信息</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="/userApp/pwdchange"><i
                                            class="ion-ios-trophy"></i> 密码修改</a>
                                </div>
                            </div>
                        </li>
                        <li class="menu-item dropdown notification-list list-inline-item">
                            <!-- Mobile menu toggle -->
                        </li>
                    </ul>
                </div>

                <div class="clearfix"></div>
            </div>
        </div>

        <!-- MENU Start -->
        <div class="navbar-custom">
            <div class="container-fluid">

                <div id="navigation">

                    <!-- Navigation Menu-->
                    <ul class="navigation-menu">

                        <li class="has-submenu">
                            <a href="/userApp/index"><i class="dripicons-home"></i> 首页</a>
                        </li>
                        <li class="has-submenu">
                            <a href="#"><i class="dripicons-view-thumb"></i> 城市数据分析</a>
                            <ul class="submenu">
                                <li><a href="/userApp/CityData">年度分析</a></li>
                                <li><a href="/userApp/CityMonth">月份分析</a></li>
                            </ul>

                        </li>


                        <li class="has-submenu">
                            <a href="#"><i class="dripicons-view-list"></i> 全国数据分析</a>
                            <ul class="submenu">
                                <li><a href="/userApp/monthTempChar">月温度分析</a></li>
                                <li><a href="/userApp/monthAirCha">月份空气质量</a></li>

                            </ul>

                        </li>
                        <li class="has-submenu">
                            <a href="/userApp/screen?user=true"><i class="dripicons-map"></i> 历史数据大屏</a>
                        </li>

                        <li class="has-submenu">
                            <a href="/userApp/chatAI"><i class="dripicons-network-2"></i> 智能问答</a>
                        </li>

                        <li class="has-submenu">
                            <a href="/userApp/weather_deatil_view"><i class="dripicons-view-thumb"></i> 详情信息</a>

                        </li>


                        <li class="has-submenu">
                            <a href="/userApp/weatherforecast/"><i class=" dripicons-star"></i>天气预测</a>
                        </li>
                    </ul>
                    <!-- End navigation menu -->
                </div>
                <!-- end #navigation -->
            </div>
            <!-- end container -->
        </div>
    </header>
</div>

<div class="wrapper" style="padding-top: 30px">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        {#                        <div class="form-group row">#}
                        {#                            <label for="" class="col-sm-1 col-form-label">城市选择:</label>#}
                        {#                            <div class="col-sm-11">#}
                        {#                                <select onchange="change(event)" name="city_select" id="city_select"#}
                        {#                                        class="form-control">#}
                        {#                                    {% for date in cityList %}#}
                        {#                                        <option value="{{ date }}">{{ date }}</option>#}
                        {#                                    {% endfor %}#}
                        {#                                </select>#}
                        {#                            </div>#}
                        {#                        </div>#}
                        <!-- 替换原来的选择框为以下结构 -->
                        <div class="form-group row">
                            <label class="col-sm-1 col-form-label">城市选择:</label>
                            <div class="col-sm-3">
                                <input list="cityList" class="form-control" id="cityInput" placeholder="输入或选择城市">
                                <datalist id="cityList">
                                    {% for city in cityList %}
                                        <option value="{{ city }}">{{ city }}</option>
                                    {% endfor %}
                                </datalist>
                            </div>

                            <label class="col-sm-1 col-form-label">年份选择:</label>
                            <div class="col-sm-2">
                                <select id="year_select" class="form-control" onchange="loadMonths(this.value)">
                                    {% for year in unique_years %}
                                        <option value="{{ year }}"
                                                {% if year == default_year %}selected{% endif %}>{{ year }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <!-- 修改年份选择框 -->


                            <label class="col-sm-1 col-form-label">月份选择:</label>
                            <div class="col-sm-2">
                                <select id="monthSelect" class="form-control">
                                    <!-- 动态加载月份 -->
                                </select>
                            </div>

                            <div class="col-sm-2">
                                <button class="btn btn-primary" onclick="queryData()" style="width: 100%">查询</button>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-2">
                <div class="card">
                    <div class="card-body">
                        <h4 class="mt-0 header-title">月平均高温</h4>
                        <div id="avg_high_temp_card"
                             style="height: 100px; width: 100%; font-size: 24px; text-align: center;">
                            -
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-2">
                <div class="card">
                    <div class="card-body">
                        <h4 class="mt-0 header-title">月平均低温</h4>
                        <div id="avg_low_temp_card"
                             style="height: 100px; width: 100%; font-size: 24px; text-align: center;">
                            -
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-2">
                <div class="card">
                    <div class="card-body">
                        <h4 class="mt-0 header-title">月极端高温</h4>
                        <div id="high_temp_card"
                             style="height: 100px; width: 100%; font-size: 24px; text-align: center;">
                            -
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-2">
                <div class="card">
                    <div class="card-body">
                        <h4 class="mt-0 header-title">月极端低温</h4>
                        <div id="low_temp_card"
                             style="height: 100px; width: 100%; font-size: 24px; text-align: center;">
                            -
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-2">
                <div class="card">
                    <div class="card-body">
                        <h4 class="mt-0 header-title">最高空气质量</h4>
                        <div id="high_air_card"
                             style="height: 100px; width: 100%; font-size: 24px; text-align: center;">
                            -
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-2">
                <div class="card">
                    <div class="card-body">
                        <h4 class="mt-0 header-title">最低空气质量</h4>
                        <div id="low_air_card" style="height: 100px; width: 100%; font-size: 24px; text-align: center;">
                            -
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <h4 class="mt-0 header-title">气温分析</h4>
                        <div id="mainOne" style="height: 400px; width: 100%"></div>
                    </div>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <h4 class="mt-0 header-title">风力统计</h4>
                        <div id="windlevelChart" style="height: 500px; width: 100%"></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<style>
    .swiper {
        width: 100%;
        height: calc(100vh - 131px);
    }

    .swiper-slide {
        height: 100%;
    }

    .wrapper {
        padding-top: 0;
    }

    body {
        padding-bottom: 0;
    }
</style>

<!-- jQuery -->
<script src="/static/static/js/jquery.min.js"></script>
<script src="/static/static/js/bootstrap.bundle.min.js"></script>
<script src="/static/static/js/jquery.slimscroll.js"></script>
<script src="/static/static/js/waves.min.js"></script>

<script src="/static/static/js/apexcharts.min.js"></script>
<script src="/static/static/js/bootstrap-datepicker.min.js"></script>

<!-- Required datatable js -->
<script src="/static/static/js/jquery.dataTables.min.js"></script>
<script src="/static/static/js/dataTables.bootstrap4.min.js"></script>
<!-- Buttons examples -->
<script src="/static/static/js/dataTables.buttons.min.js"></script>
<script src="/static/static/js/buttons.bootstrap4.min.js"></script>
<script src="/static/static/js/jszip.min.js"></script>
<script src="https://themesdesign.in/zegva/layouts/plugins/datatables/pdfmake.min.js"></script>
<script src="https://themesdesign.in/zegva/layouts/plugins/datatables/vfs_fonts.js"></script>
<script src="/static/static/js/buttons.html5.min.js"></script>
<script src="/static/static/js/buttons.print.min.js"></script>
<script src="/static/static/js/buttons.colVis.min.js"></script>
<!-- Responsive examples -->
<script src="/static/static/js/dataTables.responsive.min.js"></script>
<script src="/static/static/js/responsive.bootstrap4.min.js"></script>

<script src="/static/static/js/datatables.init.js"></script>
<script src="/static/static/js/app.js"></script>

<script>
    {#const defaultCity = "{{ cityList.0 }}";#}
    {#const defaultDate = "{{ dateList.0 }}";#}
    {#console.log("Default city:", "{{ cityList.0 }}");#}
    {#console.log("Default date:", "{{ dateList.0 }}");#}
    {#let currentCity = defaultCity;#}
    {#let currentDate = defaultDate;#}
    {##}
    {#const chartOne = echarts.init(document.getElementById('mainOne'));#}
    {#const windlevelChart = echarts.init(document.getElementById('windlevelChart'));#}
    {##}
    {#fetchData(defaultCity, defaultDate);#}
    {##}
    {#async function fetchData(selectedCity, selectedDate) {#}
    {#    try {#}
    {#        const response = await fetch(`/userApp/get_city_month_data?city=${selectedCity}&date=${selectedDate}`);#}
    {#        const data = await response.json();#}
    {#        updateCharts(data, selectedCity, selectedDate);#}
    {#    } catch (error) {#}
    {#        console.error("Error fetching data:", error);#}
    {#    }#}
    {# }#}
    {##}
    {#function change(event) {#}
    {#    const selectedCity = document.getElementById('cityInput').value;#}
    {#    currentCity = selectedCity;#}
    {#    const selectedMonth = event.target.value;#}
    {#    currentMonth = selectedMonth;#}
    {#    fetchData(selectedCity, selectedMonth);#}
    {# }#}


    {#function updateCharts(data, selectedCity, selectedMonth) {#}
    {#    // 更新卡片内容#}
    {#    document.getElementById('avg_high_temp_card').innerText = `${data.avg_high_temperature}°C`;#}
    {#    document.getElementById('avg_low_temp_card').innerText = `${data.avg_low_temperature}°C`;#}
    {#    document.getElementById('high_temp_card').innerText = `${data.high_temperature}°C`;#}
    {#    document.getElementById('low_temp_card').innerText = `${data.low_temperature}°C`;#}
    {#    document.getElementById('high_air_card').innerText = `${data.high_air}`;#}
    {#    document.getElementById('low_air_card').innerText = `${data.low_air}`;#}
    {##}
    {#    const option = {#}
    {#        // 更新折线图#}
    {#        title: {#}
    {#            text: selectedCity + selectedMonth + '月气温分析',#}
    {#            left: '40%'#}
    {#        },#}
    {#        tooltip: {#}
    {#            trigger: 'axis'#}
    {#        },#}
    {#        legend: {#}
    {#            data: ['最高温度', '平均温度', '最低温度'],#}
    {#            // 设置图例位置#}
    {#            right: '10%',  // 距离右侧10%的位置#}
    {#            top: '1%',   // 距离顶部5%的位置#}
    {#        },#}
    {#        xAxis: {#}
    {#            type: 'category',#}
    {#            data: data.xData,#}
    {#        },#}
    {#        yAxis: {#}
    {#            type: 'value',#}
    {#            boundaryGap: [0, '100%'],#}
    {#            splitLine: {show: false},#}
    {#            axisLabel: {#}
    {#                formatter: '{value} °C'#}
    {#            }#}
    {#        },#}
    {#        grid: {#}
    {#            left: '5%',#}
    {#            right: '5%',#}
    {#            bottom: '10%'#}
    {#        },#}
    {#        series: [#}
    {#            {#}
    {#                name: '最高温度',#}
    {#                type: 'line',#}
    {#                data: data.y1Data,#}
    {#                smooth: true#}
    {#            },#}
    {#            {#}
    {#                name: '最低温度',#}
    {#                type: 'line',#}
    {#                data: data.y2Data,#}
    {#                smooth: true#}
    {#            },#}
    {#            {#}
    {#                name: '平均温度',#}
    {#                type: 'line',#}
    {#                data: data.y3Data,#}
    {#                smooth: true#}
    {#            }#}
    {#        ]#}
    {#    };#}
    {##}
    {#    chartOne.setOption(option);#}
    {##}
    {#    // 更新饼图#}
    {##}
    {#    const windLevelOption = {#}
    {#    title: {#}
    {#        text: selectedCity +selectedMonth + '风力等级统计',#}
    {#        left: 'center'#}
    {#    },#}
    {#    tooltip: {#}
    {#        trigger: 'axis',#}
    {#        axisPointer: {#}
    {#            type: 'shadow'#}
    {#        }#}
    {#    },#}
    {#    grid: {#}
    {#        left: '3%',#}
    {#        right: '4%',#}
    {#        bottom: '3%',#}
    {#        containLabel: true#}
    {#    },#}
    {#    xAxis: {#}
    {#        type: 'category',#}
    {#        data: data.x1Data,#}
    {#    },#}
    {#    yAxis: [#}
    {#        {#}
    {#            type: 'value'#}
    {#        }#}
    {#    ],#}
    {#    series: [#}
    {#        {#}
    {#            name: '风力等级',#}
    {#            type: 'bar',#}
    {#            barWidth: '60%',#}
    {#            data: data.y1windData#}
    {#        }#}
    {#    ]#}
    {# };#}
    {#windlevelChart.setOption(windLevelOption);#}
    {# }#}


    const chartOne = echarts.init(document.getElementById('mainOne'));
    const windlevelChart = echarts.init(document.getElementById('windlevelChart'));
    // 默认年份和月份
    {#let currentYear = "{{ dateList.0 }}";#}
    {#let currentMonth = "{{ now.month }}";#}
    {#let currentCity = "{{ cityList.0 }}";#}
     let currentYear = "2024";
    let currentMonth = "12";
    let currentCity = "重庆";

    // 页面加载时初始化
    document.addEventListener('DOMContentLoaded', function () {
        // 设置城市输入框的默认值
        document.getElementById('cityInput').value = currentCity;

        // 设置年份选择框的默认值
        const yearSelect = document.getElementById('year_select');
        yearSelect.value = currentYear;

        // 初始化加载月份
        loadMonths(currentYear);

        // 设置月份选择框的默认值
        const monthSelect = document.getElementById('monthSelect');
        if (monthSelect.options.length > 0) {
            monthSelect.value = currentMonth;
        }

        // 加载默认数据
        fetchData(currentCity, currentYear, currentMonth);
    });

    // 动态加载月份
    function loadMonths(year) {
        const monthSelect = document.getElementById('monthSelect');
        monthSelect.innerHTML = '<option value="">加载中...</option>';

        fetch(`/userApp/get_available_months?year=${year}`)
            .then(response => {
                if (!response.ok) throw new Error('Network error');
                return response.json();
            })
            .then(data => {
                monthSelect.innerHTML = '';

                if (data.months.length > 0) {
                    data.months.forEach(month => {
                        const option = document.createElement('option');
                        option.value = month;
                        option.textContent = `${month}月`;
                        monthSelect.appendChild(option);
                    });
                    // 自动选择第一个月份并触发查询
                    if (data.months.length > 0) {
                        currentMonth = data.months[0];
                        monthSelect.value = currentMonth;
                        queryData(); // 自动刷新数据
                    }
                } else {
                    // 添加空数据提示
                    const option = document.createElement('option');
                    option.textContent = '暂无数据';
                    option.disabled = true;
                    monthSelect.appendChild(option);
                }
            })
            .catch(error => {
                console.error("Error fetching months:", error);
                monthSelect.innerHTML = '<option value="">加载失败</option>';
            });
    }

    // 查询按钮点击事件
    function queryData() {
        currentCity = document.getElementById('cityInput').value;
        currentYear = document.getElementById('year_select').value;
        currentMonth = document.getElementById('monthSelect').value;
        fetchData(currentCity, currentYear, currentMonth);
    }

    // 获取数据并更新图表
    async function fetchData(selectedCity, selectedYear, selectedMonth) {
        try {
            const response = await fetch(`/userApp/get_city_month_data?city=${selectedCity}&year=${selectedYear}&month=${selectedMonth}`);
            const data = await response.json();
            updateCharts(data, selectedCity, selectedYear, selectedMonth);
        } catch (error) {
            console.error("Error fetching data:", error);
        }
    }

    function updateCharts(data, selectedCity, selectedYear, selectedMonth) {
        // 更新卡片内容
        document.getElementById('avg_high_temp_card').innerText = `${data.avg_high_temperature}°C`;
        document.getElementById('avg_low_temp_card').innerText = `${data.avg_low_temperature}°C`;
        document.getElementById('high_temp_card').innerText = `${data.high_temperature}°C`;
        document.getElementById('low_temp_card').innerText = `${data.low_temperature}°C`;
        document.getElementById('high_air_card').innerText = `${data.high_air}`;
        document.getElementById('low_air_card').innerText = `${data.low_air}`;

        const option = {
            // 更新折线图
            title: {
                text: selectedCity + selectedYear + '-' + selectedMonth + '月气温分析',
                left: '40%'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['最高温度', '平均温度', '最低温度'],
                // 设置图例位置
                right: '10%',  // 距离右侧10%的位置
                top: '1%',   // 距离顶部5%的位置
            },
            xAxis: {
                type: 'category',
                data: data.xData,
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {show: false},
                axisLabel: {
                    formatter: '{value} °C'
                }
            },
            grid: {
                left: '5%',
                right: '5%',
                bottom: '10%'
            },
            series: [
                {
                    name: '最高温度',
                    type: 'line',
                    data: data.y1Data,
                    smooth: true
                },
                {
                    name: '最低温度',
                    type: 'line',
                    data: data.y2Data,
                    smooth: true
                },
                {
                    name: '平均温度',
                    type: 'line',
                    data: data.y3Data,
                    smooth: true
                }
            ]
        };

        chartOne.setOption(option);

        // 更新饼图

        const windLevelOption = {
            title: {
                text: selectedCity + selectedYear + '-' + selectedMonth + '风力等级统计',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: data.x1Data,
            },
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '风力等级',
                    type: 'bar',
                    barWidth: '60%',
                    data: data.y1windData
                }
            ]
        };
        windlevelChart.setOption(windLevelOption);
    }
</script>
</body>

</html>